<template>
	<view class="content" v-if="data">
		<unitv-image class="bg" :src="data.bgImg"></unitv-image>
		<view class="head">
			<view class="title">
				<text class="t1">{{ data.title }}</text>
				<text class="t2">{{ data.sub_title }}</text>
			</view>
			<view class="logo-box">
				<unitv-image class="logo" mode="heightFix" :src="data.logo"></unitv-image>
			</view>
		</view>
		<unitv-page id="mainPage" class="mainPage" :show="true" ref="unitvPage" @back="pageBack">
			<view class="body">
				<unitv-zone id="zone1" class="zone1" :autoFous="true" :column="4" :row="2">
					<unitv-item v-for="(a, index) in zone1" :item="index" :key="index" :class="{'ad': true, 'ad1': (index+1)%4!=0, 'ad2': (index+1)%4==0}"
						@click="onkeydown(a.mod_id)">
						<unitv-image :src="a.img"></unitv-image>
						<view class="text-bg">
							<text class="tip">{{ a.title }}</text>
						</view>
					</unitv-item>
					<unitv-item class="wx-box" :item="7" :key="7" @click="showWx">
						<view class="rb">
							<unitv-image class="wx" :src="data.applet"></unitv-image>
							<text class="tip">{{ data.applet_tip }}</text>
						</view>
					</unitv-item>
				</unitv-zone>
			</view>
		</unitv-page>
	</view>
</template>

<script>
	import {
		getMainData,
	} from '@/api/app.js';
	export default {
		data() {
			return {
				data: null,
				cid: null,
			}
		},
		onLoad(e) {
			this.cid = e.cid
			getMainData(e)
				.then(res => {
					if (res.code) {
						this.data = res.data
						this.data.node = JSON.parse(this.data.node);
					}
				})
				.catch(err => {});
		},
		onShow() {},
		onReady() {
			this.track()
		},
		computed: {
			zone1() {
				return [this.data.node.page1, this.data.node.page2, this.data.node.page3, this.data.node.page4, this.data
					.node.page5, this.data.node.page6, this.data.node.page7]
			}
		},
		methods: {
			pageBack(e) {
				return false;
			},
			onfocus(e) {},
			onkeydown(e) {
				uni.navigateTo({
					url: 'details?mid=' + e + '&cid=' + this.cid
				})
			},
			showWx() {}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100vw;
		height: 100vh;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		// height: 100vh;
		// padding: 3vh 3vw;

		.bg {
			position: fixed;
			left: 0px;
			right: 0px;
			top: 0px;
			bottom: 0px;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.head {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: 94vw;
			padding: 3vh 3vw 0 3vw;

			.title {
				display: flex;
				flex-direction: column;
				// align-items: center;
				justify-content: center;
				text-align: left;
				color: #f1f1f1;
				text-shadow: 0 1px 0 #ccc,
					0 2px 0 #c9c9c9,
					0 3px 0 #bbb,
					0 6px 1px rgba(0, 0, 0, .1),
					0 0 5px rgba(0, 0, 0, .1),
					0 1px 3px rgba(0, 0, 0, .3),
					0 3px 5px rgba(0, 0, 0, .2),
					0 5px 10px rgba(0, 0, 0, .25);

				.t1 {
					font-size: 35rpx;
				}

				.t2 {
					font-size: 20rpx;
				}
			}
			
			.logo-box {
				right: 0px;
				height: 45rpx;
				.logo {
				}
			}
		}

		.body {
			flex: 1;
			width: 750rpx;
			height: 337.5rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			margin-top: auto;

			.zone1 {
				width: 705rpx;
				height: 255rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				
				.ad {
					height: 120rpx;
					outline: 0px;
					position: relative;

					&.item-hover {
						transition: all 0.3s ease-out;
						transform: scale(1.1, 1.1);
						box-shadow: 0 0 3px 2px #999;
						z-index: 100;
					}

					image {
						position: absolute;
						left: 0px;
						right: 0px;
						top: 0px;
						bottom: 0px;
						width: 100%;
						height: 100%;
					}

					.text-bg {
						position: absolute;
						left: 0px;
						right: 0px;
						bottom: 10rpx;
						width: 100%;
						height: 20rpx;
						background-color: rgba($color: #000000, $alpha: 0.5);
						display: flex;
						align-items: center;
						justify-content: center;

						.tip {
							color: #ffffff;
							font-size: 14rpx;
						}
					}
				}
				
				.ad1 {
					width: 165rpx;
				}
				.ad2 {
					width: 187.5rpx;
				}
				
				.wx-box {
					width: 187.5rpx;
					height: 120rpx;
					position: relative;
				
					&.item-hover {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
				
						.rb {
							transition: all 0.3s ease-out;
							position: relative;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							background-color: rgba($color: #d6d6d6, $alpha: 0.2);
							width: 100%;
							height: 100%;
				
							.wx {
								transition: all 0.3s ease-out;
								transform: scale(1.3, 1.3);
								z-index: 100;
								margin-top: 10rpx;
							}
				
							.tip {
								transition: all 0.3s ease-out;
								transform: scale(0.8, 0.8);
								z-index: 100;
								margin-top: 10rpx;
							}
						}
					}
				
					.rb {
						position: absolute;
						right: 0px;
						bottom: 0px;
						display: flex;
						flex-direction: column;
						align-items: flex-end;
				
						.wx {
							width: 60rpx;
							height: 60rpx;
						}
				
						.tip {
							margin-top: 4rpx;
							font-size: 14rpx;
							border-top: 1rpx solid #5d89be;
							border-bottom: 1rpx solid #5d89be;
							color: #ffffff;
						}
					}
				}
			}
		}
	}
</style>
